﻿<div class="layui-form toolbar " id="system-user-search-div" lay-filter="system-user-search-div">
    <div class="layui-form-item layui-form-pane">
        <div class="layui-inline">
            <label class="layui-form-label">帐号</label>
            <div class="layui-input-inline">
                <input type="text" name="account" placeholder="请输入帐号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="nameLike" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="mobile" placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">创建时间</label>
            <!--<div class="layui-input-inline">-->
            <!--<input type="text" class="createTime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" lay-key="1">-->
            <!--</div>-->
            <div class="layui-input-inline" >
                <input type="text"  name="createTimeGt" autocomplete="off" placeholder="请输入开始时间" class="layui-input createTime">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" >
                <input type="text" name="createTimeLt"  autocomplete="off" placeholder="请输入结束时间" class="layui-input createTime">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <select name="sex">
                    <option value="">-不限-</option>
                    <option value="1">男</option>
                    <option value="0">女</option>
                </select>
            </div>
        </div>

        <div class="layui-inline ">
            <button id="system-user-search-btn" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
        </div>
    </div>
</div>
<table class="layui-table layui-form" id="system-user-table" lay-filter="system-user-table"></table>
<!-- 表格toobar -->
<div class="layui-table-tool"  style="display: none" id="system-user-toolbar">
    <div class="layui-table-tool-temp">
        <button id="system-user-add-btn" lay-perm='sys-user-add' class="layui-btn layui-btn-primary layui-btn-sm icon-btn"><i
                class="layui-icon">&#xe654;</i>添加
        </button>
        <button id="system-user-export-btn" class="layui-btn icon-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe67d;</i>导出
        </button>
    </div>
</div>
<!-- 表格操作列 -->
<div type="text/html" style="display: none" id="system-user-operate">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-perm = 'sys-user-see' lay-event="see">详情</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-perm = 'sys-user-edit' lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-perm = 'sys-user-del' lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-perm = 'sys-user-edit' lay-event="reset">重置密码</a>
</div>

<!-- 表格状态列 -->
<script type="text/html" id="system-user-state">
    <div class="layui-form" lay-filter="system-user-switch">
    <input type="checkbox"  value="{{d.id}}" lay-filter="system-user-state" lay-skin="switch" lay-text="正常|锁定"
           {{d.state==1?'checked':''}}/>
    </div>
</script>
<script>

    layui.use(['layer', 'form', 'table', 'util', 'admin','laydate'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var laydate = layui.laydate;
        form.render("","system-user-search-div")
        laydate.render({
            elem: '#system-user-search-div [name="createTimeGt"]', //指定元素
            type:"datetime",
        });
        laydate.render({
            elem: '#system-user-search-div [name="createTimeLt"]', //指定元素
            type:"datetime",
        });
        admin.renderTable({
            id:"system-user-table",
            search:"system-user-search",
            toolbar: '#system-user-toolbar',
            defaultToolbar:['filter'],
            url:"system/user/list",
            cols:[[
                {type: 'checkbox'},
                {field: 'account', sort: true, title: '账号'},
                {field: 'name', sort: true, title: '用户名'},
                {field: 'mobile', sort: true, title: '手机号'},
                {field: 'wechat', sort: true, title: '微信'},
                {field: 'qq', sort: true, title: 'QQ'},
                {
                    sort: true, templet: function (d) {
                        return util.toDateString(d.createTime);
                    }, title: '创建时间'
                },
                {field: 'sex',sort: true, title: '性别',templet:function(obj){
                        return obj.sex == "1"?"男":"女";
                    }},
                {field: 'state',sort: true, templet: '#system-user-state', title: '状态'},
                {align: 'center',toolbar: '#system-user-operate',width:"20%", title: '操作'}
            ]],
            initSort:{field:"createTime",type:"desc"}
        })

        // 添加按钮点击事件
        $('#system-user-add-btn').click(function () {
            showEditModel();
        });

        // 工具条点击事件
        table.on('tool(system-user-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            } else if (layEvent === 'reset') { // 重置密码
                resetPsw(obj.data.id);
            }else if (layEvent ==="del"){
                del(obj.data.id);
            }else if (layEvent ==="see"){
                showEditModel(data,"see");
            }
        });

        // 修改user状态
        form.on('switch(system-user-state)', function (obj) {
            console.log(obj)
            admin.req("system/user/changeState",{
                id: obj.elem.value,
                state: obj.elem.checked ? 0 : 1
            }, function (data) {
                    layer.msg("", {icon: 1});
            } ,"post",false,function() {
                $(obj.elem).prop('checked', !obj.elem.checked);
                form.render('checkbox',"system-user-switch");
            });
        });

        // 导出excel
        $('#btnExp').click(function () {
            var checkRows = table.checkStatus('userTable');
            if (checkRows.data.length == 0) {
                layer.msg('请选择要导出的数据', {icon: 2});
            } else {
                table.exportFile(ins1.config.id, checkRows.data, 'xls');
            }
        });

        // 重置密码
        function resetPsw(userId) {
            layer.confirm('确定重置此用户的密码吗？', function (i) {
                admin.req("system/user/resetPass",{userId:userId},function(){
                    layer.msg("重置密码成功", {icon: 1});
                },"post");
            });
        }

        function del(userId){
            admin.delete("system/user/delete/"+userId,{},function(){
                layer.msg("删除成功", {icon: 1});
                table.reload('system-user-table')
            })
        }

        // 显示表单弹窗
        function showEditModel(data,see) {
            admin.putTempData('system-user-form-obj', data);
            admin.putTempData('system-user-formOk', false);
            admin.openForm({
                see:see,
                title: data ? '修改用户' : '添加用户',
                submitId:"system-user-submit",
                path: 'system/user/userForm.html',
                end: function () {
                    admin.getTempData('system-user-formOk') && table.reload('system-user-table');  // 成功刷新表格
                }
            });
        }

    });
</script>

</body>
</html>